<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<script>
			//定义棋盘
			let arr=new Array();
			let isPlayer=true;
			let isFinish=false;
			//绘制棋盘
			let container = document.createElement('div');
			container.style.width = '600px';
			container.style.height = '600px';
			container.style.backgroundColor = '#fff';
			container.style.border = '5px solid black';
			container.style.margin = '0 auto';
			container.style.display = 'flex';
			for (let i = 0; i < 3; i++) {
				arr[i] = new Array();
				let row = document.createElement('div');
				for (let j = 0; j < 3; j++) {
					//初始化棋盘
					let cell = document.createElement('div');
					cell.style.width = '200px';
					cell.style.height = '200px';
					cell.style.backgroundColor = '#fff';
					cell.style.border = 'none';
					cell.style.outline = '2px solid black';
					row.appendChild(cell);
					//绑定事件
					cell.onclick = function() {
						game(cell, i, j);
					}
				}
				//绘制棋盘新的一行
				container.appendChild(row);
			}

			//将棋盘加入到页面
			let body=document.querySelector('body');
			body.appendChild(container);

			//游戏规则
			function game(cell,i,j){
				//是否结束
				if(isFinish){
					if(confirm('对局结束，刷新页面重新开始！')){
						location.reload();
					}
					return;
				}

				//是否已经有棋子
				let item=arr[i][j];
				if(item!=undefined){
					alert('这个位置已经有棋子了，请重新选择其他位置！');
					return;
				}

				//构建span标签放在被点击的cell中
				let spanEL=document.createElement('span');
				spanEL.style.width='100%';
				spanEL.style.height='100%';
				spanEL.style.lineHeight='100%';
				spanEL.style.display='flex';
				spanEL.style.justifyContent='center';
				spanEL.style.alignItems='center';
				spanEL.style.textAlign='center';
				spanEL.style.fontSize='96px';
				spanEL.style.fontWeight='bold';

				//双方出棋
				if(isPlayer){
					spanEL.innerHTML='o';
					spanEL.style.color='red';
					arr[i][j]='o';
				}else{
					spanEL.innerHTML='x';
					spanEL.style.color='blue';
					isPlayer=0;
					arr[i][j]='x';
				}

				//交换下棋者
				isPlayer=!isPlayer;

				//绘制棋子
				cell.appendChild(spanEL);
				console.log(arr);

				//效验结果
				let isWin=checkWin();
				if(isWin=='n'){
					return;
				}

				//处理结果显示
				let resultEL=document.createElement('p');
				resultEL.style.width='100%';
				resultEL.style.fontSize='36px';
				resultEL.style.fontWeight='bold';
				resultEL.style.textAlign='center';

				if(isWin=='x'){
					resultEL.style.color='blue';
					resultEL.innerHTML='蓝方胜';
				}else if(isWin=='o'){
					resultEL.style.color='red';
					resultEL.innerHTML='红方胜'
				}else if(isWin=='f'){
					resultEL.innerHTML='双方平局'
				}

				//结束
				isFinish=true;
				//显示结果
				document.querySelector('body').appendChild(resultEL);
			}

			//检查当前棋局的胜负
			function checkWin(){
				//水平
				for(let i=0;i<3;i++){
					if(arr[i][0]!=undefined&&arr[i][0]==arr[i][1]&&arr[i][1]==arr[i][2]){
						return arr[i][0];
					}
				}

				//垂直
				for(let i=0;i<3;i++){
					if(arr[0][i]!=undefined&&arr[0][i]==arr[1][i]&&arr[1][i]==arr[2][i]){
						return arr[0][i];
					}
				}

				//对角线
				if(arr[1][1]!=undefined){
					if(arr[0][0]==arr[1][1]&&arr[1][1]==arr[2][2]){
						return arr[1][1];
					}
					if(arr[0][2]==arr[1][1]&&arr[1][1]==arr[2][0]){
						return arr[1][1];
					}
				}

				//判断是否满盘
				let isFull='f';
				for(let i=0;i<3;i++){
					for(let j=0;j<3;j++){
						if(arr[i][j]==undefined){
							isFull='n';
						}
					}
				}
				return isFull;
			}
		</script>
</body>
</html>
